<template>
  <div>
    <!-- 
      ref属性
        1.被用来给元素或子组件注册引用信息(id的替代者)
        2.应用在html标签上获取的是真实dom元素,应用在组件标签上是组件实例对象(vc)
        3.使用方式:
          打标识 <h1 ref="xxx" ></h1> 或 <school ref="xxx"></school>
          获取: this.$refs.xxx
     -->
    <h1 ref="title" v-text="msg"></h1>
    <button ref="btn" @click="showDom">点我输出上方的dom元素</button>
    <school ref="sch"></school>
  </div>
</template>

<script>
    //引入组件
    import school from './components/school.vue'
    export default {
      name: 'App',
      data () {
        return {
          msg: '欢迎学习vue'
        }
      },
      components: {
        school
      },
      methods: {
        showDom () {
          console.log('@@', this.$refs.title) //真实dom元素
          console.log('@@', this.$refs.btn) //真实dom元素
          console.log('@@', this.$refs.sch) //school组件的实例对象
        }
      }
    }
</script>

<style>

</style>